{% extends 'base.html' %}

{% block title %}Explore{% endblock %}

{% block content %}

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入jquery.js -->
    <script src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>

    <!-- 引入 echarts.js -->
    <script src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/echarts-wordcloud.js')}}"></script>
    <script src="{{ url_for('static',filename='js/echarts-wordcloud.min.js')}}"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="picture" style="width: 1200px;height: 400px;">
        <div id="zzt" style="width: 1200px;height:400px;"></div>
    </div>

    <div class="picture2" style="width: 1200px;height: 580px;">
        <div id="pie" style="width: 450px;height:500px;float:left"></div>
        <div id="kongge" style="width: 100px;height:500px;float:left"></div>
        <div id="line" style="width: 450px;height:500px;float:left"></div>
    </div>

    <div class="picture3" style="width:1200px;height: 460px">
        <div id="cyt" style="width: 1000px; height: 450px"></div>
    </div>

    <script type="text/javascript">
        var info = '{{ q }}';
        console.log(info);
        // 基于准备好的dom，初始化echarts实例
        var myChart_zzt = echarts.init(document.getElementById('zzt'));

		//建立axjx所需的json数据
        var app={
            xday:[],
            yvalue:[]
        };

        //发送ajax请求
        $(document).ready(function () {
       getData_zzt(info);
       console.log(app.xday);
       console.log(app.yvalue)
    });

	//设计画图
    function getData_zzt(info) {
         $.ajax({

         //渲染的是127.0.0.1/expor?q=jjj 下的json数据
            url:'/main/zzt?tabName='+info,
            data:{},
            type:'GET',
            async:false,
            dataType:'json',
            success:function(data) {
                app.xday = data.xdays;
                app.yvalue = data.yvalues;
                myChart_zzt.setOption({
                    title: {
                        text: '各地区的平均价格'
                    },
                    tooltip: {},

                    legend: {
                        data:['价格']
                    },
                    xAxis: {
                        axisLabel:{
                        interval:0,

                    },
                        data: app.xday
                    },


                    yAxis: {},
                    //
                    series: [{
                        name: '价格',
                        type: 'bar',
                        data: app.yvalue
                    }]
                })
            },
             error:function (msg) {
                console.log(msg);
                alert('系统发生错误');
            }
        })
    }
    </script>

    <script type="text/javascript">
        var info = '{{ q }}';
        console.log(info);
        // 基于准备好的dom，初始化echarts实例
        var myChart_pie = echarts.init(document.getElementById('pie'));

		//建立axjx所需的json数据
        var app={
            xday:[],
            yvalue:[]
        };

        //发送ajax请求
        $(document).ready(function () {
       getData_pie(info);

    });

	//设计画图
    function getData_pie(info) {
        $.ajax({

            //渲染的是127.0.0.1/expor?q=jjj 下的json数据
            url: '/main/pie?tabName=' + info,
            data: {},
            type: 'GET',
            async: false,
            dataType: 'json',
            success: function (data_j) {

                data = data_j['data'];
                j = data_j['j'];
                app.xday = j.xdays;
                app.yvalue = j.yvalues;

                console.log("data_j_app",app);
                console.log("data",data);


                myChart_pie.setOption({
    title: {
        text: '各地区销量情况',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        type: 'scroll',
        orient: 'vertical',
        right: 0,
        top: 10,
        bottom: 20,
        data: app.xday,

        selected:{
            '上海': true,
            '云南': false,
            '加拿大': false,
            '北京': true,
            '吉林': false,
            '四川': false,
            '天津': false,
            '安徽': true,
            '山东': false,
            '山西': false,
            '广东': true,
            '广西': false,
            '新疆': false,
            '江苏': false,
            '江西': false,
            '河北': false,
            '河南': true,
            '浙江': false,
            '海南': false,
            '湖北': false,
            '湖南': true,
            '福建': false,
            '美国': false,
            '贵州': false,
            '辽宁': false,
            '重庆': false,
            '陕西': false,
            '黑龙江': false
        },
    },
    series: [
        {
            name: '销量',
            type: 'pie',
            radius: '40%',
            center: ['40%', '50%'],
            selectedMode: 'single',
            data: data,

            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})
            }
        })
    }
    </script>

    <script type="text/javascript">
        var info = '{{ q }}';
        console.log(info);
        // 基于准备好的dom，初始化echarts实例
        var myChart_line = echarts.init(document.getElementById('line'));

		//建立axjx所需的json数据
        var app={
            xday:[],
            yvalue:[]
        };

        //发送ajax请求
        $(document).ready(function () {
       getData_line(info);
       console.log(app.xday);
       console.log(app.yvalue)
    });

	//设计画图
    function getData_line(info) {
         $.ajax({

         //渲染的是127.0.0.1/expor?q=jjj 下的json数据
            url:'/main/line?tabName='+info,
            data:{},
            type:'GET',
            async:false,
            dataType:'json',
            success:function(data) {
                app.xday = data.xdays;
                app.yvalue = data.yvalues;
                myChart_line.setOption({
                    title: {
            text: '排名前十的店铺数据'
        },
                    tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    xAxis: {
        type: 'category',
        data: app.xday
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: app.yvalue,
        type: 'line',
        smooth:true
    }]
})
            },
             error:function (msg) {
                console.log(msg);
                alert('系统发生错误');
            }
        })
    }
    </script>

<script type="text/javascript">
        var info = '{{ q }}';
        console.log(info);
        // 基于准备好的dom，初始化echarts实例
        var myChart_cyt = echarts.init(document.getElementById('cyt'));



        //发送ajax请求
        $(document).ready(function () {
       getData_cyt(info);

    });

	//设计画图
    function getData_cyt(info) {
         $.ajax({

         //渲染的是127.0.0.1/expor?q=jjj 下的json数据
            url:'/main/cyt?tabName='+info,
            data:{},
            type:'GET',
            async:false,
            dataType:'json',
            success:function(data) {
                console.log(data);
                results=data.result;
                console.log(results);

                myChart_cyt.setOption({
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400,
                    drawOutOfBound: true,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: results
                } ]
            })
            },
             error:function (msg) {
                console.log(msg);
                alert('系统发生错误');
            }
        })
    }
    window.onresize = myChart_cyt.resize;
    </script>



</body>
</html>

 
{% endblock %}